import 'package:flutter/material.dart';
import 'package:flutterappyidongjingfen/Extension/touch_callback.dart';
import 'package:flutterappyidongjingfen/LineChart/chart_utils.dart';
import 'package:flutterappyidongjingfen/Views/TabPageViews.dart';

class SameBusinessPage extends StatefulWidget{
  @override
  SameBusinessState createState() => SameBusinessState();
}

class SameBusinessState extends State<SameBusinessPage> {
  @override
  Widget build(BuildContext context) {
    //月报曲线图


    // TODO: implement build
    return Scaffold(
      backgroundColor: Color.fromRGBO(11, 13, 28, 1),
      body: listView(context),
    );
  }
}

  Widget listView(BuildContext context){
    return Container(
      margin: EdgeInsets.only(bottom: 0,left: 5,right: 5,top: 10),
      child: ListView(
        children: <Widget>[
          titleCard("同业分部KPI得分","95.14"," "),
          Container(
            child: Card(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
              child: buttonSection,
              color: Color(0xFF23283C),
            ),
          ),
          //月报 同业整体KPI得分
          monthReportKPI(context),
          // 同业资产负债总览
          debetBrowse(context),
          //分行同业部KPI考核
          subBranchKPI(context),
        ],
      ),
    );
  }
//  Widget titleCard(){
//    return Container(
//      height: 180,
//      child: Card(
//        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
//        color: Colors.blue,
//
//      ),
//    );
//  }


  Widget buttonSection = Container(
    margin: EdgeInsets.fromLTRB(0, 20, 0, 20),
    child: Stack(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            buildButtonColumn(Colors.blue, Image.asset("images/icon_SameFinancical_line.png"), '条  线'),
            buildButtonColumn(Colors.blue, Image.asset("images/icon_SameFinancical_financial.png"), '金融同业'),
            buildButtonColumn(Colors.blue, Image.asset("images/icon_SameFinancical_kpi.png"), '考核KPI'),
            buildButtonColumn(Colors.blue, Image.asset("images/icon_SameFinancical_teamPicture.png"), '队伍画像'),
          ],
        )
      ],
    ),
  );


//月报-同业整体KPI
  Widget monthReportKPI(BuildContext context){
    return Container(
      height: 430,
      child: Card(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          color: Color(0xFF23283C),
          child: Column(
            children: <Widget>[
              cardTitleRow("月报-同业整体KPI得分"),
              totalScore("95.19"),
              monthChart(context),
              totalScoreBottom(),
              dividerLine(),
              Padding(padding: EdgeInsets.only(bottom: 15)),
              bottomQuestion()
            ],
          )
      ),
    );
  }

// 同业资产负债纵览
Widget debetBrowse(BuildContext context){
  return Container(
    height: 335,
    child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        color: Color(0xFF23283C),
        child: Column(
          children: <Widget>[
            cardTitleRow("同业资产负债总览"),
            debetBrowseList(),
          ],
        )
    ),
  );
}
//分行同业部KPI考核
Widget subBranchKPI(BuildContext context){
  return Container(
    height: 470,
    child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        color: Color(0xFF23283C),
        child: Column(
          children: <Widget>[
            cardTitleRow("分行同业部KPI考核"),
            totalScore("126.3"),
            currentMonthFifth(context),
            dividerLine(),
            Padding(padding: EdgeInsets.only(bottom: 15)),
            bottomQuestion()
          ],
        )
    ),
  );
}

// 卡片顶部标题
Widget cardTitleRow(String title){
  return Container(

    margin: EdgeInsets.fromLTRB(15, 10, 0, 10),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        SizedBox(
          width: 3,
          height: 16,
          child: Container(
//              color: Colors.blue,
            decoration: ShapeDecoration(
              color: Colors.blue,
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1.5)),
            ),
          ),
        ),
        Padding(padding: EdgeInsets.only(left: 8)),
        Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                title,
                style: TextStyle(fontSize: 16.0,color: Colors.white),
              ),
            ],
          ),
        ),
        TouchCallBack(
          child:  Container(
              alignment: AlignmentDirectional.topStart,
              margin: const EdgeInsets.only(right: 12.0,top: 5.0),
              child: Icon(Icons.chevron_right,color: Colors.white38)
          ),
          onPressed: (){
            print("${title}被点击");
          },
          background: Colors.black12,
        )

      ],
    ),
  );
}

// 整体得分
Widget totalScore(String score){
    return Container(
      margin: EdgeInsets.only(top: 5),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("整体得分",textAlign: TextAlign.center,style: TextStyle(fontSize: 14.0,color: Colors.white,fontFamily: "aliIcon")),
          Padding(padding: EdgeInsets.only(top: 5),),
          RichText(
              textAlign: TextAlign.center,
              text: TextSpan(
                children: [
                  TextSpan(
                    text: "分",
                    style: TextStyle(fontSize: 15,color: Color(0xFF119CFD)),
                  )
                ],
                text: score,
                style: TextStyle(fontSize: 42.0,color: Color(0xFF119CFD),
              )
          )
          )
        ],
      ),
    );
}

//月报曲线图
Widget monthChart(BuildContext context){
  return Container(
    margin: EdgeInsets.only(top: 5),
    child: Stack(
      children: <Widget>[
        ChartLine(
//        backgroundColor: Colors.red,
          chartBeans: [
            ChartBean(x: '1月', y: 200,color: Colors.green),
            ChartBean(x: '', y: 100,color: Colors.red),
            ChartBean(x: '3月', y: 50),
            ChartBean(x: '', y: 100),
            ChartBean(x: '', y: 200),
            ChartBean(x: '6月', y: 400),
            ChartBean(x: '', y: 350),
            ChartBean(x: '', y: 200),
            ChartBean(x: '9月', y: 50),
            ChartBean(x: '', y: 100),
            ChartBean(x: '', y: 250),
            ChartBean(x: '12月', y: 50),

          ],
          isShowHintX:true,
          hintXLineWidth: 0.5,
          hintXColor: Colors.white,
          size: Size(MediaQuery.of(context).size.width - 40,
              200),
          isCurve: true,
          lineWidth: 2.5,
          lineColor: Color(0xFF00C2FA),
          fontColor: Colors.white70,
          xyColor: Colors.transparent,
          isShowBottomtHintX: true,
          xTextPadding: 5,
          numberOfhintX: 5,
          fontSize: 11,
          yNum: 4,
          isReverse: false,
          isCanTouch: true,
          isShowPressedHintLine: true,
          pressedPointRadius: 4,
          isShowXyRuler: false,
          pressedHintLineWidth: 0.5,
          pressedHintLineColor: Colors.white,
          duration: Duration(milliseconds: 2000),
        ),
        Container(
//          color: Colors.red,
            margin: EdgeInsets.fromLTRB(12, 10, 0, 0),
            child: Text("分",style: TextStyle(fontSize:11,color: Colors.white70 ),textAlign: TextAlign.left,)
        ),
      ],
    ),
  );
}

// 蓝色小块 同业整体KPI得分值
Widget totalScoreBottom(){
    return Container(
      margin: EdgeInsets.only(top: 5,bottom: 5),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SizedBox(
            width: 12.5,
            height: 7.5,
            child: Container(
              decoration: ShapeDecoration(
                color: Colors.blue,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
              ),
            ),
          ),
          Padding(padding: EdgeInsets.only(left: 5),),
          Text("同业整体KPI得分值",style: TextStyle(fontSize: 11,color: Colors.white70),)
        ],
      ),
    );
}
//同业资产负债总览
Widget debetBrowseList(){
    return Container(
      child: Column(
        children: <Widget>[
          acanciesWith("资产余额", "2020-02-26", "4,462"),
          Container(child: dividerLine(),margin: EdgeInsets.only(top: 3)),
          acanciesWith("负债余额", "2020-02-26", "8,664"),
          Container(child: dividerLine(),margin: EdgeInsets.only(top: 3)),
          acanciesWith("其他余额", "2020-02-26", "4,022"),
          Container(
            margin: EdgeInsets.only(top: 15),
            child: dividerLine(),
          ),
          Padding(padding: EdgeInsets.only(bottom: 13)),
          bottomQuestion()
        ],
      ),
    );
}
//负债小折线图
Widget acanciesWith(String tile,String date,String number){
    return Container(
      margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(tile,style: TextStyle(fontSize: 16,color: Colors.white)),
              Padding(padding: EdgeInsets.only(top: 5)),
              Text(date,style: TextStyle(fontSize: 13,color: Colors.white60))
            ],
          ),
          Image.asset("images/char_pic.png"),
          RichText(text: TextSpan(
            text: number,
            style: TextStyle(fontSize: 42.0,color: Color(0xFF119CFD)),
            children: [
              TextSpan(
                text: "亿",
                style: TextStyle(fontSize: 15,color: Color(0xFF119CFD)),
              ),
            ],
          )),
        ],
      ),
    );
}


//分行同业部KPI考核
Widget currentMonthFifth(BuildContext context){
    return Container(

      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(child: Text("本月前五:",style: TextStyle(fontSize: 13.0,color: Color(0xFF7981A0)),),margin: EdgeInsets.only(left: 15,top: 5, bottom: 0)),
          cityRank(1, "深圳", 88.0,context),
          cityRank(2, "上海", 65.0,context),
          cityRank(3, "浙江", 62.0,context),
          cityRank(4, "广东", 58.1,context),
          cityRank(5, "背景", 56.2,context),
          cityRank(6, "江苏", 52.4,context),
        ],
      ),
    );
}

//城市排名前6
Widget  cityRank(int rank,String cityName,double score,BuildContext context){
    return Container(
//      color: Colors.red,
      margin: EdgeInsetsDirectional.fromSTEB(15, 0, 15, 0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(right: 10),
            child: Text("${rank}  ${cityName}",style: TextStyle(fontSize: 13,color: Colors.white)),
          ),
          Stack(
            children: <Widget>[
              SizedBox(
                //
                width: MediaQuery.of(context).size.width - 150,
                height: 8,
                child: Container(
                  decoration: ShapeDecoration(
                    color: Color(0xFF353A50),
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
                  ),
                ),
              ),
              SizedBox(
                width: (MediaQuery.of(context).size.width - 150) * score / 100,
                height: 8,
                child: Container(
                  decoration: ShapeDecoration(
                    gradient: LinearGradient(
                      colors: [Color(0xFF006CED),Color(0xFF00C6FB)],
                    ),
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
                  ),
                ),
              ),
            ],
          ),
          Container(
            margin: EdgeInsets.only(left: 15),
            child: Text("${score}",style: TextStyle(fontSize: 13,color: Colors.white70)),
          ),
          SizedBox(
            height: 42.0,
            child: Container(),
          )
        ],
      ),
    );
}


